<template>
    <div>
        <!--列表面板-->
        <el-card class="box-card">
            <el-button type="primary" size="small" @click="formHandle('add')">+ 添加</el-button>
            <div class="interspaceH"></div>
            <el-table :data="dataSource" default-expand-all :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%" row-key="permissionId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column prop="permissionName" label="菜单名称" :formatter="formatter"></el-table-column>
                <el-table-column prop="permissionUrl" label="菜单路径" :formatter="formatter"></el-table-column>
                <el-table-column prop="permissionIndex" label="排序" :formatter="formatter"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="formHandle('addChild', scope.row)" type="text" size="small">添加子菜单</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button @click="formHandle('edit', scope.row)" type="text" size="small">修改</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button @click="deleteHandle(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--添加/修改面板-->
        <el-dialog :title="formTitle" :visible.sync="formVisible" width="30%" :close-on-click-modal="false">
            <el-form ref="formPanel" :model="formData" label-position="left" label-width="120px">
                <el-form-item v-if="addType == 'addChild'" label="父级菜单名称">
                    <el-input v-model="formData.parentName" disabled></el-input>
                </el-form-item>
                <el-form-item label="菜单名称" prop="permissionName" :rules="{ required: true, message: '请输入菜单名称', trigger: 'blur' }">
                    <el-input v-model="formData.permissionName"></el-input>
                </el-form-item>
                <el-form-item label="菜单路径">
                    <el-input v-model="formData.permissionUrl"></el-input>
                </el-form-item>
                <el-form-item label="菜单展示图标">
                    <el-input v-model="formData.permissionIcon"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="permissionIndex" :rules="[{ required: true, message: '排序不能为空'},{ type: 'number', message: '排序必须为数字值'}]">
                    <el-input-number v-model="formData.permissionIndex" controls-position="right" :min="0"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="submitData()" type="primary">确定</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="formVisible = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//添加/修改表单
const initFormData = {
    permissionId: '',//菜单id
    permissionName: '',//菜单名称
    parentPermission: '',//父级菜单id
    parentName: '',//父级菜单名称
    permissionUrl: '',//菜单url
    permissionIcon: '',//菜单图标
    permissionIndex: 1//排序
}
//下拉列表开始

//下拉列表结束

export default {
    data() {
        return {
            //添加/修改
            formTitle: '',
            //添加/修改是否显示
            formVisible: false,
            //添加类型
            addType: '',
            //下拉列表种类
            dictionary: {},
            //字段转换
            fieldType: {},
            //添加/修改表单
            formData: {...initFormData},
            //列表数据
            dataSource: [],
        }
    },
    mounted() {
        //初始化执行查询方法
        this.queryDataHandle()
    },
    methods: {
        queryDataHandle() {
            let that = this
            let payload = {
                moduleType: '3'
            }
            that.$request("/api/authority/getAuthorityByParams/1_0", payload, "POST").then((data) => {
                that.dataSource = data.rows
            })
        },
        //重置方法
        resetQuery() {
            this.queryData = {...initQueryData}
            this.$message({
                message: '重置成功',
                type: 'success'
            });
        },
        //转换方法
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        },
        //打开添加/删除弹窗方法
        formHandle(type, row) {
            this.formData = {...initFormData}
            if (type == 'add') {
                this.formTitle = '添加'
                this.addType = 'add'
                this.formData['parentName'] = "--"
                this.formData['parentPermission'] = "0"
            } else if (type == 'edit') {
                this.formTitle = '修改'
                this.addType = 'edit'
                this.formData = {...row}
            } else if (type == 'addChild') {
                this.formTitle = '添加子菜单'
                this.addType = 'addChild'
                this.formData['parentName'] = row.permissionName
                this.formData['parentPermission'] = row.permissionId
            }

            this.formVisible = true
        },
        //删除方法
        deleteHandle(row) {
            let that = this
            that.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.$request("/api/authority/deleteAuthority/1_0?id=" + row.permissionId + "&type=3", "", "GET").then((data) => {
                    that.queryDataHandle()
                    that.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            })
        },
        //提交/修改方法
        submitData() {
            let that = this
            let dataSource = that.dataSource
            that.$refs.formPanel.validate((valid) => {
                if (!valid) {
                    return false
                }

                let url = "";
                if (that.addType == 'edit') {
                    url = "/api/authority/updateAuthority/1_0"
                } else if (that.addType == 'add' || that.addType == 'addChild') {
                    url = "/api/authority/createAuthority/1_0"
                }

                that.formData['moduleType'] = "3"

                that.$request(url, that.formData, "POST").then((data) => {
                    that.$message.success("添加成功！")
                    that.formData = {...initFormData}
                    that.queryDataHandle();
                    that.formVisible = false
                })
            });
        }
    }
}
</script>

<style scoped>
.box-card .el-input {
    width: 200px;
}

.el-card__body .el-select {
    width: 200px;
}

.el-form-item .el-select {
    width: 100%;
}

.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>



